<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			vue内置组件keep-alive可以在组件切换时将状态保存在内存中，防止重复渲染
		</pre>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let App = {
				data(){
					return {
						values: '10',
						
					}
				},
				//一定要有模板才能挂载
				template: '<div @click="change">{{values}}</div>',
				beforeCreate() {
					//组件创建之前
					console.log(this.values)//undefined
				},
				created(){
					//组件创建之后
					console.log(this.values)//10
					//ajax
				},
				beforeMount(){
					//挂载组件到DOM之前
					console.log(document.getElementById("app"))
				},
				mounted(){
					//挂载组件到DOM之后
					console.log(document.getElementById("app"))
				},
				beforeUpdate(){
					//更新DOM之前，获取原始DOM
					console.log(document.getElementById("app").innerHTML)
				},
				updated(){
					//更新DOM之后，获取最新DOM
					console.log(document.getElementById("app").innerHTML)
				},
				beforeDestory(){
					
				},
				destoryed(){
					
				},
				methods: {
					change(){
						this.values += 'zqf'
					}
				}
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						values: '10',
						
					}
				},
				//template: '<App />',
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
